<template>
    <div>
        <mj-title type="h2" title="TreeSelect 下拉树选择器"></mj-title>
        <div class="page-desc">tree-select下拉树选择器，用来处理父子关系数据</div>
        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div style="width:300px;">
                    <mj-tree-select
                        v-model="value"
                        multiple
                        :options="options"
                        :limit="2"
                        flat
                        searchable
                        append-to-body
                        placeholder="请选择"
                        @select="onSelect"
                        @deselect="onClose"
                        @search-change="searchChange"
                    >
                    </mj-tree-select>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-tree-select
                            v-model="value"
                            :multiple="true"
                            :options="options"
                            :limit="2"
                            searchable
                            flat
                            append-to-body
                            placeholder="请选择"
                            @select="onSelect"
                            @deselect="onClose"
                            @search-change="searchChange"
                        >
                    &lt;/mj-tree-select>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data() {
                                return {
                                    value: null,
                                    options: [
                                        {id: 2, label: '我是一级1', children: [{id: 5, label: '我是二级'}]},
                                        {id: 3, label: '我是一级2', children: [{id: 6, label: '我是二级'}]},
                                        {id: 4, label: '我是一级3', children: [{id: 7, label: '我是二级'}]},
                                    ]
                                }
                            },
                            methods: {
                                onSelect(node, id) {
                                    console.log(node, id)
                                },
                                onClose(node, instanceId) {
                                    console.log('关闭选项触发：',node, instanceId)
                                },
                                searchChange(searchQuery, instanceId) {
                                    console.log('搜索值触发：',searchQuery, instanceId)
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="TreeSelect node对象可用属性"></mj-title>
        <table class="api-table">
            <thead>
            <tr>
                <th>属性</th>
                <th>说明</th>
                <th>类型</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>id (required)</td>
                <td>用于识别树中的选项。在所有选项中，其值必须唯一。</td>
                <td>Number | String</td>
            </tr>
            <tr>
                <td>label (required)</td>
                <td>用于显示选项。</td>
                <td>String</td>
            </tr>
            <tr>
                <td>children</td>
                <td>
                    声明一个分支节点。您可以：<br>
                    1) 设置为由a组成的子选项数组。叶节点，b。分支节点，或c。这两种的混合物。或<br>
                    2) 设置为无子项的空数组选项。或or<br>
                    3) 设置为null <br>
                    children: undefined
                </td>
                <td>node[] | null</td>
            </tr>
            <tr>
                <td>isDisabled</td>
                <td>用于禁用项目选择</td>
                <td>Boolean</td>
            </tr>
            <tr>
                <td>isNew</td>
                <td>用于为新节点赋予不同的颜色</td>
                <td>Boolean</td>
            </tr>
            <tr>
                <td>isDefaultExpanded</td>
                <td>默认情况下是否应扩展此文件夹选项。</td>
                <td>Boolean</td>
            </tr>
            </tbody>
        </table>
        <mj-title type="h6" title="TreeSelect 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value</td>
                    <td>如果初始为空值的话单选：null、多选：null、[]</td>
                    <td>String | Number | Array</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>options</td>
                    <td>可用选项的数组</td>
                    <td>Array</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>选择框默认文字</td>
                    <td>String</td>
                    <td>请选择</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用控件</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>multiple</td>
                    <td>设置true为允许选择多个选项</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>alwaysOpen</td>
                    <td>菜单是否应始终打开</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>appendToBody</td>
                    <td>将菜单追加到body
                    </td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>backspaceRemoves</td>
                    <td>Backspace如果没有文本输入，是否删除最后一项</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>clearable</td>
                    <td>是否显示重置值的“×”按钮。</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>clearOnSelect</td>
                    <td>选择选项后是否清除搜索输入。仅在多选时有效。对于单选模式，无论prop值如何，它始终在选择后清除输入</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>closeOnSelect</td>
                    <td>选择选项后是否关闭菜单。仅在多选时有效</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>defaultExpandLevel</td>
                    <td>加载时应自动扩展多少级分支节点。设置 Infinity 为默认使所有分支节点扩展</td>
                    <td>Number</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>flat</td>
                    <td>否启用平面模式 (希望分支节点和叶子节点不会相互影响)</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>sortValueBy</td>
                    <td>
                        所选选项应按触发顺序显示并按 value 数组排序。仅在:multiple="true"。<br>
                        可接受的值："ORDER_SELECTED", "LEVEL" or "INDEX".
                    </td>
                    <td>String</td>
                    <td>ORDER_SELECTED</td>
                </tr>
                <tr>
                    <td>limit</td>
                    <td>限制所选选项的显示。其余的将隐藏在limitText 字符串中</td>
                    <td>Number</td>
                    <td>Infinity</td>
                </tr>
                <tr>
                    <td>limitText</td>
                    <td>当所选元素超过定义的限制时处理显示的消息的功能</td>
                    <td>Fn(count) 🡒 String</td>
                    <td>count => `and ${count} more`</td>
                </tr>
                <tr>
                    <td>loadingText</td>
                    <td>加载选项时显示的文本</td>
                    <td>String</td>
                    <td>数据加载中...</td>
                </tr>
                <tr>
                    <td>maxHeight</td>
                    <td>设置 maxHeight 菜单的样式值</td>
                    <td>Number</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>noChildrenText</td>
                    <td>当分支节点没有子节点时显示的文本。</td>
                    <td>String</td>
                    <td>没有子选项...</td>
                </tr>
                <tr>
                    <td>noOptionsText</td>
                    <td>没有可用选项时显示的文本</td>
                    <td>String</td>
                    <td>没有可用选项...</td>
                </tr>
                <tr>
                    <td>noResultsText</td>
                    <td>没有匹配的搜索结果时显示的文本</td>
                    <td>String</td>
                    <td>没有匹配的搜索结果...</td>
                </tr>
                <tr>
                    <td>normalizer</td>
                    <td>用于规范化源数据。</td>
                    <td>Fn(node, instanceId) 🡒 node</td>
                    <td>node => node</td>
                </tr>
                <tr>
                    <td>autoSelectDescendants</td>
                    <td>当用户选择一个节点时，将自动选择其后代。仅适用于平面模式。</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>searchable</td>
                    <td>是否启用搜索功能。</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>zIndex</td>
                    <td>菜单的层级</td>
                    <td>Number | String</td>
                    <td>2022</td>
                </tr>
                <tr>
                    <td>valueConsistsOf</td>
                    <td>
                        value 在多选模式下，数组中应包括哪种节点。<br>
                        可接受的值："ALL" | "BRANCH_PRIORITY" | "LEAF_PRIORITY" | "ALL_WITH_INDETERMINATE".<br>
                        "ALL" - 选中的所有节点都将包含在 value 数组中<br>
                        "BRANCH_PRIORITY"（默认）-如果选中了分支节点，则其所有后代将被排除在value 数组之外<br>
                        "LEAF_PRIORITY" - 如果选中了分支节点，则此节点本身及其分支后代将从value阵列中排除，但其叶后代将包括在内<br>
                        "ALL_WITH_INDETERMINATE" -选中的任何节点将包括在value 数组中，另外还有不确定的节点<br>
                    </td>
                    <td>String</td>
                    <td>"BRANCH_PRIORITY"</td>
                </tr>
                <tr>
                    <td>openDirection</td>
                    <td>
                        菜单打开方向<br>
                        默认情况下（"auto"），菜单将在控件下方打开。如果没有足够的空间将自动翻转菜单<br>
                        可选值"auto" | "below" | "bottom" | "above" | "top"
                    </td>
                    <td>String</td>
                    <td>"auto"</td>
                </tr>
            </tbody>
        </table>
        <mj-title type="h6" title="TreeSelect 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>open</td>
                    <td>菜单打开时发出</td>
                    <td>instanceId</td>
                </tr>
                <tr>
                    <td>close</td>
                    <td>菜单关闭时发出</td>
                    <td>value, instanceId</td>
                </tr>
                <tr>
                    <td>input</td>
                    <td>值更改后发出</td>
                    <td>value, instanceId</td>
                </tr>
                <tr>
                    <td>select</td>
                    <td>选择一个选项后发出</td>
                    <td>node, instanceId</td>
                </tr>
                <tr>
                    <td>deselect</td>
                    <td>取消选择一个选项后发出</td>
                    <td>node, instanceId</td>
                </tr>
                <tr>
                    <td>search-change</td>
                    <td>搜索查询更改后发出。</td>
                    <td>searchQuery, instanceId</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: null,
                options: [
                    {id: 2, label: '我是一级1', children: [{id: 5, label: '我是二级'}]},
                    {id: 3, label: '我是一级2', children: [{id: 6, label: '我是二级'}]},
                    {id: 4, label: '我是一级3', children: [{id: 7, label: '我是二级'}]},
                ]
            }
        },
        mounted() {

        },
        methods: {
            onSelect(node, id) {
                console.log(node, id)
            },
            onClose(node, instanceId) {
                console.log('关闭选项触发：',node, instanceId)
            },
            searchChange(searchQuery, instanceId) {
                console.log('搜索值触发：',searchQuery, instanceId)
            }
        },
    }
</script>
